@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"
@import "ozaria/site/styles/play/variables"
@import "app/styles/style-flat-variables"

#game-dev-track-view
  position: absolute
  display: none
  transition: right 0.25s, opacity 0.125s, z-index 1s
  &:not(.playback-float-right)
    right: calc(43% + 10px + #{$api-bar-width})
    z-index: 6
  &.playback-float-right
    right: calc(20% + 10px)
    z-index: 10
  top: 60px

  padding: 10px 21px
  border: 3px solid $teal
  background-color: black
  text-align: center
  color: white
  font-family: 'Works Sans', 'Open Sans', sans-serif
  font-size: 18px
  letter-spacing: 0.82px

  #listings
    .track-elem
      display: flex
      cursor: default

      .track-icon
        color: $teal

      .track-icon, .track-text
        display: flex
        flex-direction: column
        justify-content: center
        align-items: center
        overflow: hidden
        text-align: center
      .track-text
        width: 48px
